<!-- 单位信息对话框 -->
<template>
  <el-dialog
    title="选择抽取库"
    v-if="DialogVisible"
    :visible.sync="DialogVisible"
    width="60%"
    @close="closeDialog"
  >
    <div class="app-container">
      <el-row>
        <el-form :model="form">
          <el-row style="display: flex; justify-content: space-around">
            <el-col :span="10">
              <el-form-item label="抽取库" prop="randomUnittypeId">
                <el-select
                  v-model="form.randomUnittypeId"
                  placeholder="请选择抽取库"
                  clearable
                  size="small"
                  style="width: 100%"
                  :disabled="data2"
                >
                  <el-option
                    v-for="type in unitTypeOptions"
                    :key="type.unittypeId"
                    :label="type.unittypeName"
                    :value="type.unittypeId"
                    @click.native="
                      UnitTypeChange(null, type.unittypeId, type.unittypeName)
                    "
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item
                label="单位名称"
                prop="unitName"
                v-if="valueID != '15'"
              >
                <el-input
                  :disabled="!form.randomUnittypeId"
                  v-model="form.unitName"
                  placeholder="请输入单位名称"
                  @input="blurUnitName(form.unitName)"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>

      <el-row v-if="valueID != '15'">
        <el-table
          :data="unitList"
          @row-dblclick="rowDblclick"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.3)"
          style="width: 100%"
          row-key="unitId"
          max-height="500"
          ref="multipleTable"
          @select-all="getAllRow"
          @select="getRow"
        >
          <!-- 表头数据 -->
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="单位序号"
            align="center"
            prop="unitSort"
          ></el-table-column>
          <el-table-column
            label="单位名称"
            align="center"
            prop="unitName"
            width="300"
          ></el-table-column>
          <el-table-column
            label="单位资质"
            align="center"
            prop="unitNaturalGrade"
          ></el-table-column>
          <el-table-column
            label="资质范围"
            align="center"
            prop="unitNaturalScope"
          ></el-table-column>
          <!-- <el-table-column
            label="联系人"
            align="center"
            prop="unitRepresentative"
            width="100"
          ></el-table-column>
          <el-table-column
            label="联系电话"
            align="center"
            prop="unitRepresentativePhone"
            width="150"
          ></el-table-column> -->
          <el-table-column
            label="操作"
            align="left"
            prop="unitNaturalScope"
            width="200"
          >
            <el-button type="text" @click="handleDetail(scope.row)"
              >单位详情</el-button
            >
          </el-table-column>
        </el-table>
      </el-row>
      <el-row v-else>
        <el-row style="color: red; padding-bottom: 20px">
          *系统默认勾选通用职称类别人员，专用职称类别人员需经办人根据项目类型选择勾选，
          例如单独的市政项目可选“市政”或“市政工程”等类别，但不能选“建筑”或“公路”等类别。
        </el-row>
        <el-table
          :data="agentList"
          @row-dblclick="rowDblclick"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.3)"
          style="width: 100%"
          max-height="500"
          ref="multipleTable"
        >
          <!-- 表头数据 -->
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="招标人代表姓名"
            align="center"
            prop="name"
            width="240"
          ></el-table-column>
          <el-table-column
            label="招标人代表公司"
            align="center"
            prop="company"
            width="180"
          ></el-table-column>
          <el-table-column
            label="专业类别"
            align="center"
            prop="professionType"
          ></el-table-column>
          <el-table-column
            label="招标人代表职称"
            align="center"
            prop="profession"
          ></el-table-column>
          <el-table-column
            label="招标人代表身份证号"
            align="center"
            prop="idcard"
          ></el-table-column>
          <el-table-column
            label="招标人代表联系电话"
            align="center"
            prop="telphone"
          ></el-table-column>
        </el-table>
      </el-row>
      <div class="footer">
        <el-button
          size="el-button--medium"
          type="primary"
          icon=""
          @click="submit"
          >提交</el-button
        >
        <el-button size="el-button--medium" @click="closeDialog"
          >取 消</el-button
        >
      </div>
    </div>
    <DetailDialog :visible.sync="detailVisible" :formUnit="formUnit" />
  </el-dialog>
</template>
<script>
import {
  randomAllList,
  selectRandomAllList,
  agentlistlose,
} from "@/api/unit/unit";
import { listUnittype, getUnittype } from "@/api/unit/unittype";
import { getAgentList, delAgent } from "@/api/unit/random";
import DetailDialog from "@/common/detailDialog";

export default {
  name: "unitInfo",
  components: {
    DetailDialog,
  },
  props: {
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    rowDblclick: {
      type: Function,
      default: (row, event, column) => {
        console.log(row, event, column);
      },
    },
    tableHeader: {
      type: Array,
      default: function () {
        return [];
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    centerDialogVisible: {
      type: Boolean,
      default: false,
    },
    queryParams: [],
  },
  watch: {
    centerDialogVisible(newValue, oldVaule) {
      this.DialogVisible = newValue;
      this.form.randomUnittypeId = null;
      this.form.unitName = null;
    },
  },
  data() {
    return {
      // 单位类型字典
      form: {
        randomUnittypeId: null,
      },
      unitTypeOptions: [{ unittypeId: "", unittypeName: "" }],
      UnitqueryParams: {},
      unitList: [],
      agentList: [],
      DialogVisible: false,
      valueName: "", //抽取库名字
      valueID: "", //抽取库id
      data2: false,
      detailVisible: false,
      formUnit: {},
      selectData: [],
      oldSelectDate: [],
    };
  },
  methods: {
    getRow(selection) {
      this.selectData = selection.map((m) => m.unitId);
    },
    getAllRow(selection) {
      this.selectData = selection.map((m) => m.unitId);
    },
    //渲染抽取库
    unitTypeInfo(queryParams) {
      //渲染数据
      listUnittype(queryParams).then((response) => {
        this.unitTypeOptions = response.rows;
      });
      //重新绑定选择框数据
      if (queryParams.unitIdsTypeId) {
        this.form.randomUnittypeId = queryParams.unitIdsTypeId;
      }

      //重新加载表格
      this.UnitTypeChange(
        queryParams.unitIds,
        queryParams.unitIdsTypeId,
        queryParams.unitIdsTypeName
      );
    },
    // 只改变根据单位名称查询列表
    blurUnitName(unitName) {
      this.UnitqueryParams.unitName = unitName;
      if (this.UnitqueryParams.unitType != 15) {
        this.oldSelectDate = this.oldSelectDate.concat(this.selectData);
        this.selectData = [];
        randomAllList(this.UnitqueryParams).then((response) => {
          this.selectData = response.rows
            .filter((t) => this.oldSelectDate.indexOf(t.unitId) > -1)
            .map((m) => m.unitId);
          this.oldSelectDate = this.oldSelectDate.filter(
            (t) => this.selectData.indexOf(t) === -1
          );
          this.unitList = response.rows;
          this.$nextTick(() => {
            this.unitList.forEach((row) => {
              if (this.selectData.indexOf(row.unitId) >= 0) {
                this.$refs.multipleTable.toggleRowSelection(row, true);
              }
            });
          });
          this.loading = false;
        });
      } else {
        getAgentList().then((response) => {
          this.agentList = response.rows;
          this.loading = false;

          const $this = this;
          if (unitIds == "" || unitIds == "undefined" || unitIds == null) {
            unitIds = "-1";
          }
        });
      }
    },
    //单位选择select改变方法
    UnitTypeChange(unitIds, itemId, itemName) {
      this.form.unitName = null;
      if (itemId == "" || itemId == "undefined" || itemId == null) {
        return false;
      }

      this.valueName = itemName;
      this.valueID = itemId;
      //让table显现出来
      //查询table数据
      this.UnitqueryParams.unitType = itemId;
      this.UnitqueryParams.extractId = this.form.extractId;
      if (
        this.UnitqueryParams.unitType == 1 ||
        this.UnitqueryParams.unitType == 4 ||
        this.UnitqueryParams.unitType == 3 ||
        this.UnitqueryParams.unitType == 9
      ) {
        this.showmake = false;
      } else {
        this.showmake = true;
      }
      if (this.UnitqueryParams.unitType != 15) {
        randomAllList(this.UnitqueryParams).then((response) => {
          this.unitList = response.rows;
          this.loading = false;

          //this.toggleSelection(response.rows,this.$parent.unitList);
          // const $this = this;
          // setTimeout(function () {
          //   //默认勾选
          //   $this.toggleSelection(response.rows, unitIds);
          // }, 0);
        });
      } else {
        getAgentList().then((response) => {
          this.agentList = response.rows;
          this.loading = false;

          //this.toggleSelection(response.rows,this.$parent.unitList);
          // const $this = this;
          // if (unitIds == "" || unitIds == "undefined" || unitIds == null) {
          //   unitIds = "-1";
          // }
          // setTimeout(function () {
          //   //默认勾选
          //   $this.toggleSelection(response.rows, unitIds);
          // }, 0);
        });
      }
    },
    //表格默认勾选
    toggleSelection(rows, ids) {
      console.log(ids);
      if (ids == "" || ids == "undefined" || ids == null) {
        this.$refs.multipleTable.toggleAllSelection();
      }

      //遍历
      if (rows) {
        rows.forEach((row) => {
          if (ids != "-1") {
            ids.map((item) => {
              if (row.unitId == item) {
                this.$refs.multipleTable.toggleRowSelection(row);
              }
            });
          } else {
            if (row.professionType == "通用类别") {
              this.$refs.multipleTable.toggleRowSelection(row);
            }
          }
        });
      }
    },

    //提交数据
    submit() {
      this.oldSelectDate = this.oldSelectDate.concat(this.selectData);

      let data = this.$refs.multipleTable.selection;
      if (data.length == 0) {
        return false;
      }
      let ids = [];
      if (this.valueID == "15") {
        ids = data.map((currentItem) => currentItem.agentid);
      } else {
        ids = this.oldSelectDate;
      }
      //提交数据给后台
      let queryParams = {
        ids: ids.toString(),
        randomUnittypeId: this.UnitqueryParams.unitType,
      };

      if (this.valueID == "15") {
        agentlistlose(queryParams).then((response) => {
          try {
            if (response.code === 200) {
              const id = response.rows.map((item) => item.agentid);
              console.log(response.rows);
              //关闭弹窗
              this.closeDialog();
              //回显数据
              this.$parent.agentlist = response.rows; //不推荐
              this.$parent.unittype = this.UnitqueryParams.unitType;
              this.$parent.form.unitIds = id;
              this.$parent.form.unitIdsTypeName = this.valueName;
              this.$parent.form.randomUnittypeId =
                this.UnitqueryParams.unitType;
              this.$parent.form.unitIdsTypeId = this.UnitqueryParams.unitType;
              this.$parent.form.isTick = response.rows.map(
                (item) => item.isTick
              );
              this.$parent.form.unitStatues = "0";
              this.form.randomUnittypeId = null;
            }
          } catch (e) {
            this.$message.error(e);
          } finally {
            this.loading = false;
          }
        });
      } else {
        selectRandomAllList(queryParams).then((response) => {
          try {
            if (response.code === 200) {
              const id = response.rows.map((item) => item.unitId);
              //关闭弹窗
              this.closeDialog();
              //回显数据
              this.$parent.unitList = response.rows; //不推荐
              this.$parent.form.unitIds = id;
              this.$parent.form.unitIdsTypeName = this.valueName;
              this.$parent.form.randomUnittypeId =
                this.UnitqueryParams.unitType;
              this.$parent.form.unitIdsTypeId = this.UnitqueryParams.unitType;
              this.$parent.form.isTick = response.rows.map(
                (item) => item.isTick
              );
              this.$parent.form.unitStatues = response.rows.map(
                (item) => item.forbidden
              );
              this.form.randomUnittypeId = null;
            }
          } catch (e) {
            this.$message.error(e);
          } finally {
            this.loading = false;
          }
        });
      }
    },
    // 取消按钮
    closeDialog() {
      this.DialogVisible = false;
      this.$emit("update:centerDialogVisible", false);
      this.unitList = [];
      this.unitTypeOptions = [];
      this.form.randomUnittypeId = null;
    },
    handleDetail(row) {
      this.detailVisible = true;
      this.formUnit = row;
    },
  },
};
</script>
<style scoped>
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}
</style>
